<template>
  <div class="roomManage gl-border">
    <div class="content-item">
      <Bread :breadData="breadData" />
      <el-button type="primary"
                 size="small"
                 style="float: right"
                 @click="addArea">+添加楼栋</el-button>
    </div>
    <div class="content-item">
      <TabList :tabData="tabData"
               class="table-header-gray"
               :specCol="sepecCol"
               :columns="columns"></TabList>
      <pagenation :dataLength="total"
                  :page="queryParams.page"
                  :pageSize="queryParams.size"
                  :handleSizeChange="handleSizeChange"
                  :handleCurrentChange="handleCurrentChange" />
    </div>

    <add-or-edit-dialog ref="formDialog"
                        :dialogForm="dialogForm"
                        :handleClose="handleClose"
                        :addOrEditSure="addOrEditSure"
                        :sexList="sexList"
                        :typeList="typeList"
                        :rules="rules"
                        :title="title"
                        :addOrEditShow="addOrEditShow"></add-or-edit-dialog>
  </div>
</template>
<script>
import Bread from '../../componetns/bread'
import AddOrEditDialog from './addOrEditFloorDialog'
import { pagination } from '@/tools/mixin'
// import { sexTrans } from '@/tools/utils'
import {
  listBuildingUsingPOST,
  addOrUpdateBuildingUsingPOST,
  dataDictUsingGET,
  removeBuildingUsingDELETE
} from '@api/auto'
export default {
  components: {
    Bread,
    AddOrEditDialog
  },
  mixins: [pagination],
  data () {
    return {
      total: 0,
      queryParams: {
        size: 10,
        page: 1
      },
      dialogForm: {
        number: '',
        totalFloor: null,
        objectOrientedId: null,
        gender: 0,
        landlineNumber: null,
        campusId: JSON.parse(sessionStorage.floorInfo).id,
        id: null
      },
      title: '',
      addOrEditShow: false,
      sexList: ['不限', '男', '女'],
      typeList: [],
      rules: {
        number: [{ required: true, message: '请输入楼栋编号', trigger: 'blur' }],
        totalFloor: [{ required: true, message: '请填写楼层', trigger: 'blur' },
          { pattern: /^[0-9]{1,6}$/, message: '楼层必须是不小于0的数字', trigger: 'blur' }],
        objectOrientedId: [{ required: true, message: '请选择面向对象', type: 'number', trigger: 'change' }],
        gender: [{ required: true, message: '请选择面向性别', type: 'number', trigger: 'change' }],
        landlineNumber: [{ required: true, message: '请输入座机号', trigger: 'change' },
          { pattern: /^0\d{2,3}-\d{7,8}$/, message: '请输入正确格式的座机号（例如：028-88888888）', trigger: 'blur' }]
      },
      breadData: [
        { name: '园区', path: '/main/apartmentManage/roomManage/index' },
        { name: JSON.parse(sessionStorage.floorInfo).name, path: '/main/apartmentManage/roomManage/floorManageindex' }],
      tabData: [],
      columns: [
        { label: '楼栋-单元', prop: 'numberAndUnitNumber' },
        { label: '楼层', prop: 'totalFloor' },
        { label: '房间类型', prop: 'roomTypeName' },
        { label: '房间数', prop: 'totalRoom' },
        { label: '床位数', prop: 'totalBed' },
        { label: '面向对象', prop: 'objectOrientedName' },
        { label: '面向性别', prop: 'gender' },
        { label: '座机号', prop: 'landlineNumber' },
        { label: '操作', prop: 'func' }
      ],
      sepecCol: [
        { label: '楼栋-单元', prop: 'build', tem: '<el-button type="text" @click="that.$parent.intoFloor(row)">{{build}}</el-button>' },
        { label: '面向性别', prop: 'gender', tem: '<span>{{$transSex(gender)}}</span>' },
        { label: '操作',
          prop: 'func',
          tem: `<div>
          <el-button type="text" @click="that.$parent.edit(row)">编辑</el-button>
        <el-button type="text" @click="that.$parent.deleteFun(row)">删除</el-button>
        </div>` }
      ]
    }
  },
  created () {
    this.query()
    dataDictUsingGET('object_oriented').then(res => {
      this.typeList = res.data
    })
  },
  methods: {
    // 获取列表
    query (pageNum = 1) {
      this.queryParams.page = pageNum
      listBuildingUsingPOST({ id: JSON.parse(sessionStorage.floorInfo).id, ...this.queryParams }).then(res => {
        this.tabData = res.data.list
        this.total = res.data.total || 0
      })
    },
    // 添加楼栋
    addArea () {
      this.addOrEditShow = true
      this.title = '添加楼栋'
    },
    // 进入楼层
    intoFloor (row) {
      this.$router.push({ name: 'homeManage' })
      sessionStorage.roomInfo = JSON.stringify(row)
    },
    // 编辑
    edit (row) {
      this.dialogForm.number = row.number
      this.dialogForm.totalFloor = row.totalFloor
      this.dialogForm.objectOrientedId = row.objectOrientedId
      this.dialogForm.gender = row.gender
      this.dialogForm.landlineNumber = row.landlineNumber
      this.dialogForm.id = row.id
      this.addOrEditShow = true
      this.title = '编辑楼栋'
    },
    // 删除
    deleteFun (row) {
      this.$confirm('确定删除该楼栋？', '提示', {
        type: 'warning'
      }).then(_ => {
        removeBuildingUsingDELETE(row.id).then(res => {
          this.$message.success('删除成功')
          this.query()
        })
      }).catch(() =>
        this.$message.info('已取消删除')
      )
    },
    // 关闭弹窗
    handleClose () {
      this.addOrEditShow = false
      this.dialogForm.id = null
      this.$refs.formDialog.$refs.dialogForm.resetFields()
      this.dialogForm = {
        number: '',
        totalFloor: null,
        objectOrientedId: null,
        gender: 0,
        landlineNumber: null,
        campusId: JSON.parse(sessionStorage.floorInfo).id,
        id: null
      }
    },
    // 编辑或者新增弹窗确定
    addOrEditSure () {
      this.$refs.formDialog.$refs.dialogForm.validate((valid) => {
        if (valid) {
          addOrUpdateBuildingUsingPOST(this.dialogForm).then(res => {
            this.query()
            this.handleClose()
            this.$message.success('操作成功')
          })
        }
      })
    }

  }
}
</script>
